import React from 'react';
import { Box, CardBase, SellingCard, Text } from '@nova-hf/ui';
import { ThemeColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { formatPrice } from 'beta/utils/helpers';
import { useRouter } from 'next/router';
import { ContractStatus, useContractsQuery } from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

import {
  KASTARI_VARIANT_ID,
  ROUTER_25X_VAIANT_ID,
  ROUTER_VARIANT_ID,
} from '../../containers/FiberServiceContainer';

type Variant = {
  id: string;
  monthlyCharge: number;
  name: string;
};

type Option = {
  count: number;
  type: string;
  variants: Variant[];
};

export type CardItem = {
  id: string;
  title?: string;
  description?: string;
  options?: Option[];
  isCurrent?: boolean;
  isUnavailable?: boolean;
  price?: number;
  buttonText?: string;
  isLoading?: boolean;
  isApplicable?: boolean;
  unavailableDescription?: string;
  serviceId?: string;
};

type SellingCardItemProps = {
  sellingCardItem: CardItem;
  onSelectCard?: (item: CardItem) => void;
  selectedCard?: CardItem;
  priceUnit?: string;
  color?: ThemeColorType;
  isDisabled?: boolean;
  hasButton?: boolean;
};

const INFINATE_OPTIONS = ['∞', 'endalaus', 'ótakmarkað', 'otakmarkad', 'infinite'];

export const isInfinite = (title: string) => {
  return INFINATE_OPTIONS.some((option) => title.toLowerCase().includes(option));
};

export const sliceInfinateText = (title: string) => {
  let slicedTitle = title;
  INFINATE_OPTIONS.forEach((key: string) => {
    slicedTitle = slicedTitle.replace(key, '');
  });
  return slicedTitle;
};

export const SellingCardItem = ({
  sellingCardItem,
  onSelectCard,
  selectedCard,
  priceUnit,
  color,
  isDisabled,
  hasButton = true,
}: SellingCardItemProps) => {
  const { t } = useTranslation('thjonustubreyting');
  const router = useRouter();
  const serviceId = typeof router?.query?.serviceId === 'string' ? router?.query?.serviceId : '';
  const customerId = typeof router?.query?.customerId === 'string' ? router?.query?.customerId : '';

  const { data: contractData } = useContractsQuery({
    variables: {
      input: {
        serviceId,
        customerId,
      },
    },
    skip: !serviceId || !customerId,
  });
  const contracts = contractData?.contracts?.contracts;
  const contract = contracts?.find(
    (contract) =>
      contract.status === ContractStatus.Active || contract.status === ContractStatus.Pending,
  );
  const contractItems = contract?.contractItems;
  const devices = contractItems?.filter((device) => device.__typename === 'DeviceContractItem');
  const kastari = devices?.find((item) => item?.variant?.id === KASTARI_VARIANT_ID);
  const fiberRouter = devices?.find((item) => item?.variant?.id === ROUTER_VARIANT_ID);
  const kastariPrice =
    kastari && kastari?.variant?.monthlyCharge ? kastari?.variant?.monthlyCharge : 0;
  const routerPrice =
    fiberRouter && fiberRouter?.variant?.monthlyCharge ? fiberRouter?.variant?.monthlyCharge : 0;
  const adgangsgjald = contractItems?.find((item) => item?.variantId?.includes('adgangsgjald'));
  const options = sellingCardItem?.options?.filter((item) => {
    const variant = item?.variants?.[0];
    if (kastari && fiberRouter) {
      return variant && variant.id !== ROUTER_25X_VAIANT_ID;
    }
    if (kastari && !fiberRouter) {
      return variant && variant.id !== ROUTER_25X_VAIANT_ID && variant.id !== ROUTER_VARIANT_ID;
    }
    if (!kastari && fiberRouter) {
      return variant && variant.id !== ROUTER_25X_VAIANT_ID && variant.id !== KASTARI_VARIANT_ID;
    }
    if (!kastari && !fiberRouter) {
      return (
        variant &&
        variant.id !== ROUTER_25X_VAIANT_ID &&
        variant.id !== KASTARI_VARIANT_ID &&
        variant.id !== ROUTER_VARIANT_ID
      );
    }
  });
  const mapOptions = () => {
    return options?.map((item) => {
      const variant = item.variants[0];
      if (variant) {
        return {
          price: variant.monthlyCharge,
          id: variant.id,
          title: variant.name,
        };
      }
    });
  };
  const extraOption = {
    price: adgangsgjald?.variant?.monthlyCharge,
    id: adgangsgjald?.variant?.id,
    title: adgangsgjald?.variant?.name,
  };
  const mappedOptions = mapOptions();
  const optionsWithAdgangsgjald =
    mappedOptions && extraOption ? [...mappedOptions, extraOption] : undefined;

  return (
    <SellingCard
      isLoading={sellingCardItem.isLoading}
      height="100%"
      color={sellingCardItem.isUnavailable ? 'grey400' : color}
      options={optionsWithAdgangsgjald}
      title={
        isInfinite(sellingCardItem.title ?? '')
          ? sliceInfinateText(sellingCardItem.title ?? '')
          : sellingCardItem.title ?? ''
      }
      borderColor={selectedCard?.id === sellingCardItem.id ? color : 'grey200'}
      description={sellingCardItem.description ?? ''}
      priceSection={{
        price: sellingCardItem.isLoading
          ? ''
          : ` ${formatPrice(
              sellingCardItem.price ? sellingCardItem.price + kastariPrice + routerPrice : 0,
            )}`,
        description: priceUnit ?? '',
      }}
      {...(isDisabled && { isDisabled: true })}
      {...(isInfinite(sellingCardItem.title ?? '') && { icon: 'infinity' })}
      {...(sellingCardItem.isUnavailable && {
        tooltip: {
          children: (
            <CardBase borderColor="grey200" dottedShadow="none" hasBorder>
              <Box padding={2}>
                <Text marginBottom={1} variant="pMediumBold">
                  {t('sellingCard.withLjosleidari')}
                </Text>
                <Text marginBottom={1} variant="pXSmallRegular">
                  {sellingCardItem.unavailableDescription}
                </Text>
              </Box>
            </CardBase>
          ),
          icon: 'questionMark',
          position: 'bottom-right',
        },
      })}
      {...(hasButton && {
        button: {
          text: sellingCardItem.isLoading
            ? ''
            : sellingCardItem.isCurrent
            ? t('sellingCard.currentButton')
            : selectedCard?.id === sellingCardItem.id
            ? t('sellingCard.selectedButton')
            : t('sellingCard.availableButton'),
          onClick: () => onSelectCard && onSelectCard(sellingCardItem),
          isDisabled: sellingCardItem.isLoading || sellingCardItem.isUnavailable || isDisabled,
          colorScheme:
            selectedCard?.id === sellingCardItem.id || (sellingCardItem.isCurrent && !selectedCard)
              ? color
              : 'white',
          style: {
            pointerEvents:
              sellingCardItem.isUnavailable || sellingCardItem.isCurrent ? 'none' : 'auto',
          },
        },
      })}
    />
  );
};